<!--
 * @Author: 橘子
 * @Date: 2022-11-26 09:33:29
 * @Project_description: demo
 * @Description: 代码是我抄的，不会也是真的
-->
<template>
  <div>
    <el-card body-style='{height: 20px;}' class='box-card' shadow='always'>
      <div slot='header' class='clearfix'>
        <span>系统信息</span>
      </div>
      <el-descriptions :column='1'>
        <el-descriptions-item label='系统'>{{ sys.os.name }}</el-descriptions-item>
        <el-descriptions-item label='系统版本'>{{ sys.os.version }}</el-descriptions-item>
        <el-descriptions-item label='浏览器'>{{ sys.browser.name }}</el-descriptions-item>
        <el-descriptions-item label='浏览器版本'>{{ sys.browser.version }}</el-descriptions-item>
        <el-descriptions-item label='系统UA'
        ><span class='base-row-btn' @click='_copy(sys.ua)'>{{ sys.ua }} </span></el-descriptions-item
        >
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'sys',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      sys: {},
    }
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState('d2admin/ua', ['data']),
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.sys = this.data
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    eidt() {
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
